
<template>
  <div class="nav">
    <div v-for="(item,index) in list" :key="index+'ccc'" class="item">
        <template v-if="item.select" >
            <span class="select" @click="drag(index,item.select)" >{{item.ttle}}</span>
        </template>
        <template v-else>
          <span  class="default" @click="drag(index,item.select)">{{item.ttle}}</span>
        </template>
    </div>
  </div>
</template>
<script>
export default {
	props: {
		list: {}
	},
  methods:{
    drag(index,item){
      		this.$nextTick(() => {
			  	for (var i = 0; i < this.list.length; i++) {
					this.list[i].select = 0
				}
				this.list[index].select = 1
      })
      switch(index){
        case 0:
          this.$router.push('/')
        case 1:
          this.$router.push('/recommend')
      }
    }
  }
}
</script>

<style  scoped lang='scss'>
.nav {
  position: fixed;
  top: 0;
  width: 100%;
	height: 3rem;
	line-height: 2rem;
  padding: 0.2rem;
  box-sizing: border-box;
  display: flex;
  font-size: 2.2rem;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
  .item{
    .select{
      color: #ce4f4c;
    }
  }
}
</style>
